<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
</head>
<script src="../vue-2.6.11.js"></script>
<body>
	<!-- 模板 -->

	<div id="app">

		<h2>在父组件中使用count</h2> 

		<p>{{ count }}</p>
		
		<custom-component :count="count" @increment="countChange"></custom-component>

	</div>

	<script> 
		Vue.component('custom-component',{
			props:{
				count:{
					// type:Number, //验证传入的数据是否是Number类型
					// type:[Number,String],//指定多种类型
					// default:10,  //给count指定默认值
					// required:true
					validator:function (value){
						console.log(value);
						return value>5;
					}
				}
			},

			data:function (){
				return {
					incrementCount:this.count//作为data局部数据的初始值
				}
			},

			template:`
				<div>
					<h2>自定义组件</h2>
					<input type="button" value="改变count值" @click="changeCount" />
					{{ incrementCount }}
				</div>`,
			methods:{

				changeCount:function (){
					this.incrementCount++;
					//通知父组件子组件的count值变化了
					this.$emit('increment');
				}
			}
		});

		//vm实例
		var vm = new Vue({

			el: '#app',
			data:{
				count:20
			},
			methods:{
				countChange:function (){
					// alert('子组件发生了点击');
					this.count++;
				}
			}
		});
	</script>
</body>
</html>
</body>
</html>